<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - Dashboard">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="销售数量" value="528,779" />
      <KPICard label="到货及时率" value="61.38%" orange />
      <KPICard label="库存周转率" value="2.44" green />
      <KPICard label="库存覆盖天数" value="41.5" green />
      <KPICard label="库存总量" value="19,364" />
      <KPICard label="目标完成率" value="157.41%" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-2x2">
      <ChartCard title="商品销售情况" grid-area="a">
        <ChartHtml :htmlContent="chartHtml" />
      </ChartCard>
      <ChartCard title="库存水平与采购水平月度变化" grid-area="b">
        <ChartHtml :htmlContent="inventoryProcurementHtml" />
      </ChartCard>
      <ChartCard title="商品采购概览" grid-area="c">
        <ECharts :option="procurementOverviewOption" />
      </ChartCard>
      <ChartCard title="库存覆盖天数" grid-area="d">
        <ECharts :option="inventoryCoverageOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import ChartHtml from '../components/ChartHtml.vue'
import * as echarts from 'echarts'
import { getChartHtml, getInventoryProcurementHtml } from '../utils/chartOptions'
import './Screen.css'

const chartHtml = ref('')
const inventoryProcurementHtml = ref('')
const salesTrendOption = ref({})
const inventoryProcurementOption = ref({})
const procurementOverviewOption = ref({})
const inventoryCoverageOption = ref({})

onMounted(() => {
  // 获取商品销售情况 HTML
  chartHtml.value = getChartHtml()
  
  // 获取库存水平与采购水平月度变化 HTML
  inventoryProcurementHtml.value = getInventoryProcurementHtml()

  // 销售月度趋势图
  salesTrendOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['销售额', '销售完成率'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '销售完成率',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [3500000, 3200000, 3800000, 3600000, 4000000, 4200000, 3800000, 4100000, 4300000, 3900000, 4500000, 4800000],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '销售完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [181.63, 163.47, 199.79, 181.63, 145.3, 160.5, 175.2, 168.9, 182.3, 155.6, 170.8, 165.4],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 库存水平与采购水平月度变化
  inventoryProcurementOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['采购数量', '库存数量'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '采购数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '库存数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '采购数量',
        type: 'bar',
        data: [5075, 4420, 4437, 5222, 4058, 3751, 3903, 1825, 4100, 3900, 4200, 4500],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        }
      },
      {
        name: '库存数量',
        type: 'line',
        yAxisIndex: 1,
        data: [25000, 23000, 28000, 27000, 24000, 22000, 26000, 21000, 25000, 23000, 27000, 29000],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' }
      }
    ]
  }

  // 商品采购概览
  procurementOverviewOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['采购数量', '采购金额同比'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '20%'
    },
    xAxis: {
      type: 'category',
      data: ['Product_3', 'Product_7', 'Product_9', 'Product_2', 'Product_8', 'Product_10', 'Product_4', 'Product_1', 'Product_5', 'Product_6'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff', rotate: 45 }
    },
    yAxis: [
      {
        type: 'value',
        name: '采购数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '采购金额同比',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '采购数量',
        type: 'bar',
        data: [6137, 5834, 5739, 5168, 5162, 4911, 4804, 4563, 4533, 4486],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        }
      },
      {
        name: '采购金额同比',
        type: 'line',
        yAxisIndex: 1,
        data: [1.47, 5.58, 7.08, 1.98, 0.42, 2.35, 3.67, 1.23, 4.56, 6.78],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 库存覆盖天数
  inventoryCoverageOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['库存覆盖天数', '库存覆盖天数环比'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '库存覆盖天数',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '环比',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '库存覆盖天数',
        type: 'bar',
        data: [38, 42, 41, 39, 43, 40, 38, 41, 39, 42, 40, 41.5],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '库存覆盖天数环比',
        type: 'line',
        yAxisIndex: 1,
        data: [1.32, -10.17, 2.03, 7.68, -15.26, 12.07, -10.88, 1.24, 2.56, -5.43, 8.91, -3.21],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }
})
</script>

